
<template>
<div class = "Slideshowone" v-loading = loading>
             <el-container>
            <el-container>
            <el-main>
             <el-breadcrumb separator="/" style="padding-bottom:15px;">
                <el-breadcrumb-item style="font-weight: bold;cursor:pointer" @click.native = "goBack">基地管理</el-breadcrumb-item>
                <el-breadcrumb-item v-if = "Basetype === 'home'">首页轮播图</el-breadcrumb-item>
                <el-breadcrumb-item v-if = "Basetype === 'base_type'">基地列表轮播图</el-breadcrumb-item>
                </el-breadcrumb>
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="50px" class="demo-ruleForm">
            <el-form-item label="名称" prop="title">
                <el-input  v-model="ruleForm.title" autocomplete="off" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item  label="内容" prop="content">
                <el-input
                :rows="3"
                placeholder="请输入内容"
                v-model="ruleForm.content">
                </el-input>
            </el-form-item>
            <el-form-item  label="权重" prop="weight">
                <el-input
                type="number"
                :rows="3"
                placeholder="请输入内容"
                v-model="ruleForm.weight">
                </el-input>
            </el-form-item>
            <el-form-item  label="链接" prop="link">
                <el-input
                :rows="3"
                placeholder="请输入链接"
                v-model="ruleForm.link">
                </el-input>
            </el-form-item>
            <el-form-item  label="类型" prop="type" v-if = "Basetype === 'base_type'">
            <el-select v-model="ruleForm.type" placeholder="请选择类型" >
                  <el-option
                    v-for="item in options"
                    :key="item.name"
                    :label="item.name"
                    :value="item.index"
                    @click.native="downSwitch(item.serial)"
                   >
                  </el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="图片">
               <el-upload
              class="upload-demo"
              :action="this.IP"
              :data="{type:'image'}"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="fileList"
              :on-success="handleAvatarSuccess"
              :limit="1"
              list-type="picture">
              <el-button size="small" type="primary">点击上传</el-button>
              </el-upload> 
            </el-form-item>
            <el-form-item style="float:right">
            <el-button v-if = "Boole===0" type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button v-if = "Boole===1" type="primary" @click="submitFormone('ruleForm')">修改</el-button>
            </el-form-item>
        </el-form>
            </el-main>
            </el-container>
             </el-container>
</div>
</template>
<script>
export default {
    data(){
      var validatetitle = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入名称'));
        } else {
          callback();
        }
      };
      var validatecontent = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入内容'));
        } else {
          callback();
        }
      };
      var validateweight = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入权重'));
        } else {
          callback();
        }
      };
      var validatetype = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入类型'));
        } else {
          callback();
        }
      };
      var validatetype = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入类型'));
        } else {
          callback();
        }
      };
      var validatelink = (rule, value, callback) => {
        var pattrn = /^(http:\/\/|^https:\/\/|^\/\/)((\w|=|\?|\.|\/|&|-)+)/g
        if (value === '') {
           callback(new Error('请输入链接'));
        } else if(!pattrn.test(value)){
           callback(new Error('请输入正确的链接'));
        } else {
           callback(); 
        }
      };
        return{
            Boole:null,
            loading:false,
            fileList:[],
            ruleForm: {
            link:'',
            title: '',
            content: '',
            imgId:'',
            weight:'',
            baseId:'',
            id:'',
            type:''
            },
            position:'',
            rules:{
            title: [
                { validator: validatetitle, trigger: 'blur' }
            ],
            content: [
                { validator: validatecontent, trigger: 'blur' }
            ],
            weight:[
                { validator: validateweight, trigger: 'blur' }
            ],
            link:[
                { validator: validatelink, trigger: 'blur' }
            ],
            type:[
                { validator: validatetype, trigger: 'blur' }
            ]
            },
            options: [{
                serial:'23',
                index: "social_practice",
                name: "社会实践基地"
                }, {
                serial:'24',
                index: "research_base",
                name: "研学实践基地"
                }, {
                serial:'25',
                index: "research_camp",
                name: "研学实践营地"
            }],
            Basetype:'',
            serial:''
            }
    },
    created() {
        this.List()
    },
    methods:{
        List(){
            this.loading = true
            this.Basetype = this.$route.query.value
            let form = this.$route.query.form
            this.position = this.$route.query.position
            if(form){
                this.ruleForm = form
                this.fileList = [{url:form.imgUrl}]
                this.ruleForm.imgId = form.imgId
                this.dialogVisible = true
                this.Boole = 1
                this.Top = '修改'
                this.loading = false
            } else if(this.position) {
                this.Boole = 0
                this.Top = '新增'
                this.loading = false
            }
        },
        downSwitch(item){
            this.serial = item
        },
        //添加
        submitForm(formName){
            console.log(this.options.name)
            this.$refs[formName].validate((valid) => {
                if(this.ruleForm.imgId){
                  if(valid){
                      this.loading = true
                    let Add = {}
                    if(this.Basetype === 'home'){
                        Add = {
                        imgId:this.ruleForm.imgId,
                        link:this.ruleForm.link,
                        title:this.ruleForm.title,
                        content:this.ruleForm.content,
                        weight:this.ruleForm.weight
                    }
                    } else {
                        Add = {
                        imgId:this.ruleForm.imgId,
                        link:this.ruleForm.link,
                        title:this.ruleForm.title,
                        content:this.ruleForm.content,
                        weight:this.ruleForm.weight,
                        type:this.ruleForm.type
                        }
                    }
                    this.$api.slideshow.slideshowadd(Add,this.position).then(res => {
                        if(res.code === 200){
                            this.open('成功','添加图片','success')
                            this.loading = false
                            this.goBack()
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false
                }  
                } else {
                    this.open('失败','请添加图片','warning')
                }
      })
      },
      //修改
      submitFormone(formName){
              this.$refs[formName].validate((valid) => {
                if(this.ruleForm.imgId){
                  if(valid){
                      this.loading = true
                    let Add = {}
                    if(this.Basetype === 'home'){
                        Add = {
                        imgId:this.ruleForm.imgId,
                        link:this.ruleForm.link,
                        title:this.ruleForm.title,
                        content:this.ruleForm.content,
                        weight:this.ruleForm.weight
                    }
                    } else {
                        Add = {
                        imgId:this.ruleForm.imgId,
                        link:this.ruleForm.link,
                        title:this.ruleForm.title,
                        content:this.ruleForm.content,
                        weight:this.ruleForm.weight,
                        type:this.ruleForm.type
                        }
                    }
                    this.$api.slideshow.slideshowmodification(Add, this.ruleForm.id).then(res => {
                        if(res.code===200){
                            this.open('成功','修改成功','success')
                            this.loading = false
                            this.goBack()
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false
                }  
                } else {
                    this.open('失败','请添加图片','warning')
                }
      })
      },
        handleAvatarSuccess(response, file, fileList){
            this.ruleForm.imgId = file.response.data.id
        },
        handleRemove(file, fileList) {
            this.ruleForm.imgId = ''
            },
        handlePreview(file) {
            console.log(file);
            },
        open(title,content,type) {
            this.$notify({
            title: title,
            message: content,
            type: type
            });
        },
        //后退
        goBack(){
            this.$router.push(`Slideshow?Basetype=${this.Basetype}`)
        }
    }
}
</script>
<style scoped>

</style>

